<template>
  <view class="topic" @click="navigateToDetail(topic)">
    <view class="topic-cover">
      <image :src="topic.cover" mode="aspectFit"></image>
    </view>
    <view class="topic-info">
      <view class="question">
        {{ topic.question }}
      </view>
      <view class="detail" v-if="topic.studyTime">
        <text>学习时间: {{ formattedStudyTime }}</text>
      </view>
      <view class="detail" v-else>
        <text>{{ topic.difficulty }}</text>
        <text>{{ topic.views }}次学习</text>
      </view>
    </view>
  </view>
</template>
<script>
import { formatTime } from "../../utils";
export default {
  name: "topic",
  props: {
    topic: {
      type: Object,
    },
  },
  methods: {
    navigateToDetail(topic) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${topic.id}`,
      });
    },
  },
  computed: {
    formattedStudyTime() {
      return formatTime(this.topic.studyTime);
    },
  },
};
</script>
<style lang="scss">
.topic {
  display: flex;
  align-items: center;
  padding: 20rpx;
  .topic-cover {
    flex-shrink: 0;
    width: 200rpx;
    height: 200rpx;
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20rpx;
    }
  }
  .topic-info {
    flex-grow: 1;
    padding-left: 30rpx;
    .question {
      font-size: 32rpx;
      font-weight: bold;
      max-height: 2.4em;
      line-height: 1.2em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      margin-bottom: 16rpx;
    }
    .detail {
      display: flex;
      justify-content: space-between;
      text {
        font-size: 24rpx;
        &:first-child {
          color: gray;
          margin-right: 24rpx;
        }
      }
    }
  }
}
</style>
